$color-light: #fff;
$color-dark: #080808;
$color-transparent: transparent;
$color-primary: #1e88e5;

.nav {
  width: 100vw;
  height: 74px;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 24px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  z-index: 200;
  transition-duration: 300ms;
  transition-property: background-color;

  .content--left, .content--right {
    height: inherit;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .content--left {
    flex-shrink: 0;

    .logo-container {
      height: inherit;
      display: flex;
      padding-bottom: 15px;

      ::v-deep .v-btn {
        align-self: center;

        .v-btn__content {
          opacity: 1 !important;

          .logo {
            width: 20vw;
            height: 20vh;
            min-width: 130px;
            max-width: 170px;
            max-height: 50px;
            margin-bottom: 10vm;
          }
        }
      }
    }

    .items-container {
      height: inherit;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      margin-left: 50px;

      .item {
        height: inherit;
        padding: 0 14px;
        display: flex;
        align-content: center;
        text-align: center;
        font-size: 16px;
        font-weight: 400;
        word-break: keep-all;
        line-height: 74px;
        user-select: none;
        cursor: pointer;
        transition-duration: 500ms;
        transition-property: color;

        .v-icon {
          margin: 6px;
          transition-duration: 500ms;
        }
      }

      .item:hover {
        color: $color-primary;

        .v-icon {
          color: $color-primary;
          transform: rotate(180deg);
        }
      }
    }
  }

  .content--right {
    flex-shrink: 0;
    margin-left: auto;

    .search-container {
      height: inherit;

      .search-field {
        width: 300px;
        height: inherit;
        display: flex;
        margin: 0 20px;

        ::v-deep .v-text-field {
          align-self: center;

          .v-input__slot {
            min-height: 40px;

            label {
              top: 12px;
            }

            .v-input__append-inner {
              margin-top: 7px;
            }
          }
        }
      }

      .search-btn {
        height: inherit;
        display: flex;

        ::v-deep .v-btn {
          align-self: center;

          .v-btn__content {
            opacity: 1;
          }
        }
      }
    }

    .user-info-container {
      height: inherit;

      .login-btn-container {
        height: inherit;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;

        .v-btn {
          align-self: center;
        }
      }
    }
  }

  .floating-menu {
    height: fit-content;
    position: fixed;
    top: 74px;
    padding: 8px 4px;
    border-radius: 8px;
    background-color: #181a1a;
    user-select: none;
    transition-duration: 300ms;
    transition-property: opacity;

    .item {
      color: $color-light;
      text-align: center;
      padding: 8px 24px;
      font-size: 14px;
      word-break: keep-all;
      white-space: nowrap;
      cursor: pointer;
      transition-duration: 300ms;
      transition-property: color;
    }

    .item:hover {
      color: $color-primary;
    }
  }

  .floating-menu--show {
    opacity: 1;
  }

  .floating-menu--hidden {
    opacity: 0;
  }

  @media screen and (max-width: 900px) {
    .content--left {

      .aside-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: -24px;
        padding: 0 24px;
        cursor: pointer;
      }

      .logo-container {
        padding-bottom: 15px;
      }

      .items-container {
        display: none;
      }
    }
  }
}

.nav--light {
  background-color: $color-light;
  color: $color-dark;

  .items-container {
    .item {
      .v-icon {
        color: $color-dark;
      }
    }
  }
}

.nav--dark {
  background-color: $color-dark;
  color: $color-light;

  .items-container {
    .item {
      .v-icon {
        color: $color-light;
      }
    }
  }
}

.nav--transparent {
  background-color: $color-transparent;
  color: $color-light;

  .items-container {
    .item {
      .v-icon {
        color: $color-light;
      }
    }
  }

  ::v-deep .v-text-field {
    input, label, button {
      color: #fff;
    }
  }

  .floating-menu {
    top: 60px;
  }
}

::v-deep .v-navigation-drawer {
  padding: 45px 40px 45px 40px;
  z-index: 200;

  .fa-chevron-down {
    font-size: 16px;
  }

  .v-list-group__items {

    .v-list-item {
      padding-left: 30px;
      margin-bottom: 8px;
    }
  }

  .item--home {
    margin-bottom: 0 !important;
    padding-bottom: 0;
  }
}
.search-user-popup-container {
  width: 50vw;
  height: fit-content;
  min-height: 300px;
  max-width: 700px;
  max-height: 600px;
  display: flex;
  flex-direction: column;
  padding: 40px;
  background-color: #fff;
  transition-property: height;
  transition-duration: 300ms;

  .title-text {
    width: 100%;
    height: fit-content;
    padding: 10px 0 30px 0;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
  }

  .desc-text {
    width: 100%;
    height: fit-content;
    padding: 10px 0 10px 0;
    font-size: 14px;
  }
}